<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="../lib/html5shiv.js"></script>
    <script type="text/javascript" src="../lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="../lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->
    <script type="text/javascript" src="../lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <title>编辑账号信息</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
        .headlist {
            display: block;
            text-align: center;
        }

        .headlist img {
            height: 40px;
            width: 40px;
            padding: 2px;
            border-radius: 50% 50%;
            cursor: pointer;
        }

        .headlist .selected {
            padding: 0px;
            border: 2px dashed red;
        }

        .partlist{
            position:relative;
        }
        .partlist ul{
            list-style-type: none;
        }
        .partlist li{
            display:inline-block;
            box-sizing: border-box;
            padding-left: 12px;
            border:1px solid #5a98de;
            position:relative;
            border-radius: 2px;
            margin-right: 4px;
            padding-right: 4px;
            cursor:pointer;
        }
        .partlist .hit{
            
        }
        .partlist .hit::before{
            content: '√';
            color:#5a98de;
            position:absolute;
            left:2px;
        }
    </style>
</head>

<body>
    <article class="page-container">
        <form class="form form-horizontal" id="form-article-add">

            <div class="row cl" style="display:none">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>ID标识：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="0" placeholder="" name="id" readonly>
                </div>
            </div>


            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">用户名</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" required placeholder="" maxlength="16"
                        name="userName">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">用户头像</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" required pattern="/static/image/head/[0-9]{1,2}.png" placeholder="点击下发选择一个"
                        maxlength="128" name="userHead">
                </div>
            </div>

            <div class="row cl">
                <div class="headlist">
                    <img src="/static/image/head/1.png" datastr="/static/image/head/1.png">
                    <img src="/static/image/head/2.png" datastr="/static/image/head/2.png">
                    <img src="/static/image/head/3.png" datastr="/static/image/head/3.png">
                    <img src="/static/image/head/4.png" datastr="/static/image/head/4.png">
                    <img src="/static/image/head/5.png" datastr="/static/image/head/5.png">
                    <img src="/static/image/head/6.png" datastr="/static/image/head/6.png">
                    <img src="/static/image/head/7.png" datastr="/static/image/head/7.png">
                    <img src="/static/image/head/8.png" datastr="/static/image/head/8.png">
                    <img src="/static/image/head/9.png" datastr="/static/image/head/9.png">
                    <img src="/static/image/head/10.png" datastr="/static/image/head/10.png">
                </div>
            </div>



            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">邮箱</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" required placeholder="" maxlength="64" name="email">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">密码</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="password" class="input-text" value="" required placeholder="" maxlength="64" name="passWord">
                </div>
            </div>


            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">角色组</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <!-- <input type="text" class="input-text" value="" required placeholder="" maxlength="16" name="grade"> -->
                    <select name="grade">               
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">部门岗位</label>
                <div class="formControls col-xs-8 col-sm-9 partlist">
                    <ul></ul>
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">状态</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="checkbox" class="input-checkbox mui-switch-anim mui-switch" value="" placeholder="" checked name="isEnable">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">账号备注</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" maxlength="64" name="desc">
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                    <button onClick="_funcAdd();" class="btn btn-primary radius" type="button">保存</button>
                    <!--<button onClick="article_save();" class="btn btn-secondary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存草稿</button>-->

                </div>
            </div>
        </form>
    </article>

    <!--_footer 作为公共模版分离出去-->
    <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script>
    <!--/_footer /作为公共模版分离出去-->
    <script src="../lib/api.js"></script>


    <script type="text/javascript">

        var iseditemodel = false;
        $(function () {
            //获取参数中的ID
            var userid = 0;

            var uidstr = _apigetquery("id");
            if (uidstr != null) {
                userid = parseInt(uidstr);
                iseditemodel = true;
                if (userid == 0) {
                    iseditemodel = false;
                }else{
                    $("input[name=passWord]").removeAttr("required");
                }

                
            } else {

                iseditemodel = false;

            }

            _apiget("/api/app/gradeInfo?page=1&size=200",false,function(code,obj){
                if(code==200){
                    var appendhtml="";
                    for(var k=0;k<obj.items.length;k++){
                        var item = obj.items[k];
                        appendhtml+='<option value="'+item.name+'">'+item.desc+'('+item.name+')</option>';
                    }
                    $("select[name=grade]").append(appendhtml);
                }
            });

            _apiget("/api/app/partInfo?page=1&size=200",false,function(code,obj){
                if(code==200){
                    var appendhtml="";
                    for(var k=0;k<obj.items.length;k++){
                        var item = obj.items[k];
                        appendhtml+='<li dataid="'+item.id+'">'+item.name+'</li>';
                    }
                    $(".partlist").find("ul").append(appendhtml);
                }
            });

            if (iseditemodel) {

                $(".styleadd").hide();

                _loaditem(userid);
            }
            $(".headlist").on('click', 'img', function () {
                var str = $(this).attr("datastr");
                $("input[name=userHead]").val(str);
                $(this).siblings().removeClass("selected");
                $(this).addClass("selected");
            })

            $('.partlist').on('click','li',function(){
                if($(this).hasClass("hit")){
                    $(this).removeClass("hit");
                }else{
                    $(this).addClass("hit");
                }
            })

        });

        function _loaditem(_tempid) {
            //读取角色列表
            _apiget("/api/app/userInfo/" + _tempid + "/infoForUpdate", true, function (code, obj) {
                if (code == 200) {
                    for (var key in obj) {
                        var objdom = $("[name=" + key + "]");
                        if (objdom.length > 0) {
                            var tagname = objdom[0].tagName;
                            if (tagname == "INPUT") {
                                var type = objdom[0].type;
                                if (type == "checkbox") {
                                    console.log(obj[key]);
                                    if (obj[key] || obj[key] === 1) {
                                        objdom.prop("checked", true);
                                        objdom.parent().addClass("checked");
                                    } else {
                                        objdom.prop("checked", false);
                                        objdom.parent().removeClass("checked");
                                    }
                                } else {
                                    objdom.val(obj[key]);
                                }
                            } else if (tagname == "SELECT") {
                                objdom.val(obj[key]);
                            } else if (tagname == "TEXTAREA") {
                                objdom.val(obj[key]);
                            }
                        }
                    }

                    if(obj.parts!=null && obj.parts.length>0){
                        for(var i=0;i<obj.parts.length;i++){
                            $(".partlist").find("li[dataid="+obj.parts[i].id+"]").addClass("hit");
                        }
                    }
                }
            });


        }


        function _funcAdd() {
            if(!_beforeValidity("#form-article-add")){
                return;
            }
            var dataobj = $("#form-article-add").parseForm();

            var partelcs=$(".partlist").find(".hit");
            if(partelcs.length>0){
                var tempids=new Array();
                for(var k=0;k<partelcs.length;k++){
                    var dataid=$($(partelcs[k])).attr("dataid");
                    if(dataid!=undefined){
                        tempids.push(parseInt(dataid));
                    }
                }
                dataobj.partids=tempids;
            }

            if (iseditemodel) {
                ///api/tyc/accountInfo/updateAccount

                // dataobj.grade=$("select[name=grade]").val();//默认做了Int类型读取
                _apipost("/api/app/userInfo/updateItem", true, JSON.stringify(dataobj), function (code, obj) {
                    if (code == 200) {
                        layer.msg("更新成功", { time: 1500 }, function () {
                            // if (removeIframe) {
                            //     removeIframe();
                            // }
                        });

                    }
                });
            } else {

                // var dataobj = $("#form-article-add").parseForm();
                // dataobj.grade=$("select[name=grade]").val();
                _apipost("/api/app/userInfo/item", true, JSON.stringify(dataobj), function (code, obj) {
                    if (code == 200) {
                        layer.msg("添加成功");
                    }
                });

            }
        }
    </script>
    <!--/请在上方写此页面业务相关的脚本-->
</body>

</html>